【pickadate.js】シンプルだけど高機能な日付カレンダー編

【pickadate.js】シンプルだけど高機能な日付カレンダー編

Clock Icon2013.07.31

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

pickadate.jsというライブラリーの中で、高機能な日付カレンダーを紹介してもらったので試してみました。

アジェンダ

  • ソースのダウンロード
  • 実装してみる。
  • 日本語表記にする
  • いろいろなオプション
  • まとめ

ソースのダウンロード

img-001

まずはこちらのサイトからソースをダウンロードしてきます。ファイルを展開するといろいろファイルはありますが実際に使うファイルは[lib]フォルダ内にあります。

img-002-1

[lib]フォルダ内は以下のファイルになります、今回は日付カレンダー用のjs、cssを使用してみます。

img-003

実装してみる

それでは実際に表示してみようと思います。今回のデモで使用したファイルになります。

css

  • default.css
  • default.date.css

javascript

  • jquery
  • picker.date.js
  • legacy.js
  • app.js←こちらが実際に実行するファイルです。

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Pickadate demo 001</title>

<link rel="stylesheet" href="./css/default.css">
<link rel="stylesheet" href="./css/default.date.css">


<script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>

<script src="./js/picker.js"></script>
<script src="./js/picker.date.js"></script>
<script src="./js/legacy.js"></script>
<script src="./js/app.js"></script>

</head>
<body>

<fieldset class="fieldset">
  <input id="demo001"  type="text" placeholder="クリックしてください">
</fieldset>


</body>
</html>

app.js

$(function() {
    $('#demo001').pickadate();
});

実際に表示してみる

インプット要素をクリックすると日付カレンダーが表示されます。なかなかシンプルでいいですね。

デモページ

img-004

日本語表記

日本語対応は、まだ残念ながら対応されていないようなので自作してみました。 lang-ja.jsファイルを作成し、app.jsの前に読み込んでおきます。

javascript

  • jquery
  • picker.date.js
  • legacy.js
  • lang-ja.js←こちら読み込みます。
  • app.js
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Pickadate demo 002</title>

<link rel="stylesheet" href="./css/default.css">
<link rel="stylesheet" href="./css/default.date.css">


<script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
<script src="./js/picker.js"></script>
<script src="./js/picker.date.js"></script>
<script src="./js/legacy.js"></script>
<script src="./js/lang-ja.js"></script>
<script src="./js/app.js"></script>

</head>
<body>

<fieldset class="fieldset">
  <input id="demo002"  type="text" placeholder="クリックしてください">
</fieldset>


</body>
</html>

lang-ja.js

jQuery.extend( jQuery.fn.pickadate.defaults, {
    monthsFull: [ '1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月' ],
    monthsShort: [ '1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月' ],
    weekdaysFull: [ '日曜' , '月曜', '火曜', '水曜', '木曜', '金曜', '土曜'],
    weekdaysShort: [ '日曜' ,  '月曜', '火曜', '水曜', '木曜', '金曜', '土曜'],
    today: '本日',
    clear: 'キャンセル',
    format: 'yyyy年mm月dd日'
});

指定オプションの説明

オプション 説明
monthsFull 月の表記を指定
monthsShort 省略された月の表記。例:April→Apr
日本語表記は省略された月表記はなし。
weekdaysFull 曜日の表記を指定
weekdaysShort 省略された曜日の表記を指定。例:Sunday→Sun
日本語表記は省略された曜日表記はなし。
today 下部の当日指定ボタンの表記。
format インプット要素のvalueに入る日付フォーマットの表記。

日本語表記で表示ができました。

デモページ

img-005

いろいろなオプション

週始まりの指定

カレンダーの月曜始まりか日曜始まりかの指定が可能です。

$(function() {
    $('セレクタ').pickadate({
        firstDay: 1
    });
});
  • 0指定の場合:日曜週始まりカレンダー指定
  • 1指定の場合:月曜週始まりカレンダー指定

デモページ

入力日付フォーマット指定

カレンダーからの入力フォーマットの指定が可能です。

$(function() {
    $('セレクタ').pickadate({
      format: 'yyyy年m月d日(ddd)'
    });
});

例として上記の指定をすると:xxxx年x月d日(曜日)といった表記で入力が可能です。

デモページ

オプション 説明 表示サンプル
d 日の表示(数値) 1 – 31
dd 日の表示(数値) 01 – 31
ddd 省略された曜日の表示 Sun – Sat(デフォルト指定)
日曜 - 土曜(上記の日本語化の場合)
dddd 曜日の表示 Sunday – Saturday(デフォルト指定)
日曜 - 土曜(上記の日本語化の場合)
m 月の表示(数値) 1 – 12
mm 月の表示(数値) 01 – 12
mmm 省略された月名の表示 Jan – Dec
1月 - 12月(上記の日本語化の場合)
mmmm 月名の表示 January – December
1月 - 12月(上記の日本語化の場合)
yy 2桁までの西暦を表示(数値) 00 – 99
yyyy 西暦を表示(数値) 2000 – 2999

年月のドロップダウン指定

年月の指定をドロップダウンから指定が可能です。

$(function() {
    $('セレクタ').pickadate({
      selectYears: true,
      selectMonths: true
    });
});

デモページ

上記以外にも、設定できる項目がこちらで紹介されています。
いろいろ試してみていただければと思います。

まとめ

シンプルな作りですが、いろいろな用途を想定した作りになっておりかなりパワフルなコンポーネントではないでしょうか。
独自に作成したテーマ等も反映できるようだったので、オリジナルテーマのカレンダーコンポーネントも作成が可能なようです。
急ぎ足でpickadate.jsのカレンダーコンポーネントをご紹介しました。

Share this article

facebook logohatena logotwitter logo

© Classmethod, Inc. All rights reserved.